<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UpGoRemove</title>
<link href="static/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="static/css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="static/css/app.css"/>
<link href="static/css/mmenu.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="static/css/fileinput/fileinput.css"/>
</head>
<body>
<div class="header">
  <div class="container">
     <div id="page">
		<div id="header_nav">
			<a href="#menu"></a>
		</div>
	    <nav id="menu">
			<ul>
				<li class="Selected"><a href="{{ url_for("main.index") }}">首页</a></li>
				<li><a href="#arrow" class="scroll">简介</a></li>
				<li><a href="#updataTree" class="scroll">更新日志</a></li>
			</ul>
		</nav>
	   </div>
	   <h1>欢迎你使用UpGoRemove</h1>
	   <s> </s>
	   <br/>	   <br/>	   <br/>
	   <div class="container">
           {% if keyExist == 1 or keyExist == 2 %}
			<button class="fa-btn btn-1 btn-1e " data-toggle="modal" data-target="#myModal">上传图片</button>
            <p>
                {% if keyExist == 2 %}
                    密钥次数还剩： {{ count }} 次
                {% endif %}
                <a href="javascript:void(0);" data-toggle="modal" data-target="#keyModal" style="color: white;font-size: 15px;margin-left: 30px">添加密钥</a>
            </p>

           {% else %}
            <button class="fa-btn btn-1 btn-1e " data-toggle="modal" data-target="#keyModal">填入密钥</button>
           <p>
                {% if count == 0 %}
                    数据库中密钥不可用，请添加密钥
                {% endif %}
               <a href="https://www.remove.bg/api" target="_blank" style="color: white;font-size: 15px;margin-left: 30px">获得密钥？</a>
{#               <a href="{{ url_for('main.guest') }}" style="color: white;font-size: 15px;margin-left: 30px">使用免密钥体验版</a>#}
           </p>
           {% endif %}
       </div>
	   <div class="header_arrow">
	      <a href="#arrow" class="scroll"><span> </span></a>
	   </div>
</div>
</div>
<div class="introduct" id="arrow">
	<div class="container">
		<h2>UpGoRemove是什么？</h2>
		<span> </span>
        <p>Underpainting Remove</p>
		<p>利用RemoveBG的人工智能算法帮您快速剔除所有有前景图片的背景，拥有堪比专业抠图大师的水平甚至超越人工处理图片的水准，整个过程仅需数秒的时间。</p>
        <p>快速输出你需要的<i style="color: red">红</i>、<i style="color:blue;">蓝</i>、<i>白</i> 底证件照！</p>
	</div>
</div>
<div class="create">
	<div class="container">
		<a href="#" id="back-to-top" class="fa-btn btn-1 btn-1e">我要上传</a>
		<button type="button" class="layui-btn " style="display:none;" id="testListAction">开始上传</button>
	</div>
</div>
<div class="introduct" id="updataTree">
	<div class="container">
		<h2>UpGoRemove更新日志</h2>
		<span> </span>
    </div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-09-17：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.修复填入私钥无法跳转进服务页面的bug（感谢a675286277的issue）<br>2.优化跳转逻辑，删除体验按钮，更加适合私人搭建</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-13：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">添加sql文件，架设试用地址，更改readme中的描述</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-09：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.新增3种图片格式['jfif', 'pjpeg', 'pjp']<br>2.增加体验模式，免密钥使用全部功能</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-08：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.使用蓝图重构项目结构<br>2.上传演示文件<br>3.更新描述图片、依赖及项目说明<br>4.github发布v0.1试用版本</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-07：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.修改了项目名称，更名为UPGOMOVE<br>2.尝试引入mysql数据库以及尝试解决密钥限制问题</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-06：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.新增用户自备密钥模态窗口，用户可以使用自己的密钥使用本应用<br>2.保护用户隐私，退出图片下载页后会立即执行删除代理删除用户图片</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-05：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">修复多浏览器对图片链接只执行浏览不执行下载的问题</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-03：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.更新上载框架，优化图片处理逻辑<br>2.完成图片长廊模块，图像处理结束后会传递到图像长廊，方便用户自由下载已完成图片</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-02：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.图片上传后可以返回下载链接到本地<br>2.修改了上传控件，选用了bootstrap-fileinput</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-08-01：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">1.index首页布局完成<br>2.背景删除逻辑完成，已经可以成功输出无背景图片<br>3.修复依赖漏洞，提升应用安全性</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-07-31：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">新增依赖文件描述，方便一键导入依赖</p>
        </div>
	</div>
    <div class="container">
        <div class="col-xs-4">
            <p>2019-07-30：</p>
        </div>
        <div class="col-xs-8">
            <p class="text-left">完成文件上传模块</p>
        </div>
    </div>
</div>
<div class="create">
	<div class="container">
		<a href="#" id="back-to-top" class="fa-btn btn-1 btn-1e">我要上传</a>
		<button type="button" class="layui-btn " style="display:none;" id="testListAction">开始上传</button>
	</div>
</div>

<div class="contact" id="contact">
    <div class="footer">
        <div class="container">
            <p class="copy">REMOVEBACKGROUND FUNCTION MADE BY <a href="https://www.remove.bg">REMOVEBG</a> WEB DEVELOPMENT BY <a href="https://wangxinleo.cn">YOJO</a></p>
        </div>
            <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    选择您需要更换背景的图片
                </h4>
            </div>
{#            <form action="{{ url_for("upload_file") }}" method=post enctype=multipart/form-data>#}
{#                <div class="modal-body">#}
{#                    <ul>#}
{#                        <li>目前上传的图片仅支持jpg/png/jpeg等三种格式</li>#}
{#                    </ul>#}
{#                    <input id="fupload" type="file" class="file" name="file"/>#}
{#                </div>#}
{#                <div class="modal-footer">#}
{#                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>#}
{#                    <button type="submit" onclick="$('#loadingModal').modal('show');" class="btn btn-primary">上传</button>#}
{#                </div>#}
{#            </form>#}
            <div class="modal-body">
                <ul>
                    <li>目前上传的图片支持['png', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp']等格式</li>
                </ul>
                <input id="fupload" type="file" class="file" name="file"/>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="loadingModal" style="background-color: rgba(0,0,0,0.6)">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px;">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5 style="color:white"> <strong>文件上传成功！正在处理...图片处理根据像素大小需花费5-10秒，请稍候...</strong> </h5>
    </div>
</div>

<div class="modal fade" id="keyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    填入密钥<span><a href="https://www.remove.bg/api" target="_blank" style="color: blue;font-size: 15px;margin-left: 30px">获得密钥？</a></span>
                </h4>
            </div>
            <form action="{{ url_for("main.pushkey") }}" method=post enctype=multipart/form-data>
            <div class="modal-body">
                <lable>密钥：</lable>
                <input type="text" class="form-control" name="key" placeholder="例：vamVjdC9weXRob24vYXV4c3lzX3d6L2F">
                <lable>剩余次数：</lable>
                 <input type="text" class="form-control" name="num" placeholder="例：50">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="static/js/jquery-1.11.1.min.js"></script>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="static/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="static/js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="static/js/move-top.js"></script>
<script type="text/javascript" src="static/js/easing.js"></script>
<script type="text/javascript" src="static/js/fileinput/fileinput.js"></script>
<script type="text/javascript" src="static/js/fileinput/locales/zh.js"></script>
<script type="text/javascript" src="static/js/fileinput/plugins/piexif.js"></script>
<script type="text/javascript" src="static/js/fileinput/plugins/purify.js"></script>
<script type="text/javascript" src="static/js/fileinput/plugins/sortable.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
<script type="text/javascript">
$("#fupload").fileinput({
    language: 'zh', //设置语言
    uploadUrl:"/upload", //上传的地址
    allowedFileExtensions: ['png', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],//接收的文件后缀
    uploadAsync: true, //默认异步上传
    showUpload:true, //是否显示上传按钮
    showRemove :true, //显示移除按钮
    showPreview :true, //是否显示预览
    showCaption:true,//是否显示标题
    browseClass:"btn btn-primary", //按钮样式
    dropZoneEnabled: true,//是否显示拖拽区域
    maxFileSize:1024,
    maxFileCount:0, //表示允许同时上传的最大文件个数
    enctype:'multipart/form-data',
    dropZoneTitle:'拖拽文件到这里 … 暂不支持多文件同时上传',
    validateInitialCount:false,
    previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
});
$("#fileInput").fileinput("upload");

$('#fupload').on("fileuploaded", function (event, data, previewId, index){
    if(data.response)
        {
            $('#loadingModal').modal();
            fileId = data.response.Data[0].fileId
            filename = data.response.Data[0].filename
            window.open("/drawing/"+fileId+"/"+filename,"_self")
        }
});

//异步上传失败
$('#fupload').on('fileerror', function(event, data, msg) {
    alert("失败了");
});



</script>
</body>
</html>
